<template>
 <div class='headerpc'>
   <div class="left">
     
   </div>
     <el-menu :default-active="activeIndex" 
     active-text-color="#00baff" text-color="#333" 
     class="el-menu-demo" mode="horizontal" 
     @select="handleSelect">
  <el-menu-item index="1">
    <router-link to="/home">首页</router-link>
  </el-menu-item>
  <el-menu-item index="2">
    <router-link to="/course">课程列表</router-link>
    </el-menu-item>
  <el-submenu index="3">
    <template slot="title">在线编程</template>
    <el-menu-item index="3-1">scritch编程</el-menu-item>
  </el-submenu>
   <el-submenu index="4">
    <template slot="title">下载专区</template>
    <el-menu-item index="4-1">资料下载</el-menu-item>
    <el-menu-item index="4-2">软件下载</el-menu-item>
  </el-submenu>
   <el-submenu index="5">
    <template slot="title">竞赛研学</template>
    <el-menu-item index="5-1">红色专区</el-menu-item>
    <el-menu-item index="5-2">师培活动</el-menu-item>
    <el-menu-item index="5-3">竞赛活动</el-menu-item>
    <el-menu-item index="5-4">等级考试</el-menu-item>
    <el-menu-item index="5-5">研学活动</el-menu-item>
  </el-submenu>
   <el-submenu index="6">
    <template slot="title">联盟社区</template>
    <el-menu-item index="6-1">学生作品</el-menu-item>
    <el-menu-item index="6-2">最新活动</el-menu-item>
    <el-menu-item index="6-3">新闻资讯</el-menu-item>
    <el-menu-item index="6-4">家长问答</el-menu-item>
    <el-menu-item index="6-5">机构问答</el-menu-item>
  </el-submenu>
   <el-submenu index="7">
    <template slot="title">关于我们</template>
    <el-menu-item index="7-1">联盟简介</el-menu-item>
    <el-menu-item index="7-2">联盟机构</el-menu-item>
    <el-menu-item index="7-3">加入联盟</el-menu-item>
    <el-menu-item index="7-4">荣誉资质</el-menu-item>
    <el-menu-item index="7-5">联系我们</el-menu-item>
  </el-submenu>
</el-menu>
  <div class="login" >
    <span @click="loginpc">登录</span>
    <span>|</span>
    <span @click="registerpc">注册</span>
  </div>
 </div>
</template>

<script>
   export default {
      data() {
          return {
            activeIndex: '1',
            Navmenu: [
        {
          title: "首页",
          pathName: "/home"
        },
        {
          title: "课程列表",
          pathName: "/course"
        },
        {
          title: "在线编程",
          pathName: "/code",
          isSubMenu: true,
          subMenu: [
            {
              title: "scratch创作",
              isOuter: true,
              pathName: "/studentwork/scratch3/index.html?id=0&p=0"
            }
          ]
        },
        {
          title: "下载专区",
          pathName: "/down",
          isSubMenu: true,
          subMenu: [
            { title: "资料下载", pathName: "/community/train" },
            { title: "软件下载", pathName: "/down/software" } 
          ]
        },
        {
          title: "竞赛研学",
          pathName: "/competition",
          isSubMenu: true,
          subMenu: [
            { title: "红色专区", pathName: "/competition/program" },
            { title: "师培活动", pathName: "/competition/innovate" },
            { title: "竞赛活动", pathName: "/competition/computer" },
            { title: "等级考试", pathName: "/competition/robot" },
            { title: "研学活动", pathName: "/competition/informatics" }
          ]
        },
        {
          title: "联盟社区",
          pathName: "/community",
          isSubMenu: true,
          subMenu: [
            { title: "学生作品", pathName: "/community/stuWorks" },
            { title: "最新活动", pathName: "/community/material" },
            { title: "新闻资讯", pathName: "/community/news" },
            { title: "家长问答", pathName: "/community/parentAnswer" },
            { title: "机构问答", pathName: "/community/mechanismAnswer" }
          ]
        },
        {
          title: "关于我们",
          pathName: "/aboutUs",
          isSubMenu: true,
          subMenu: [
            { title: "联盟简介", pathName: "/aboutUs/brand" },
            { title: "联盟机构", pathName: "/aboutUs/campusDisplay" },
            { title: "加入联盟", pathName: "/aboutUs/joinIn" },
            { title: "荣誉资质", pathName: "/aboutUs/trainingForTeachers" },
            { title: "联系我们", pathName: "/aboutUs/contactUs" }
          ]
        }
      ]

          }
      },
      //生命周期 - 创建完成
     created(){ 
       
     },

     //DOM挂载完毕
     mounted() {
           

     },
      methods: {
        //pc端登录事件
        loginpc(){
          this.$router.push("/login")
        },
        //pc端注册事件
        registerpc(){

        },
        //导航栏事件
          handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }

      },
 }
</script>

<style lang='less' scoped>
.headerpc{
  display: flex;
  justify-content: space-around;
  align-items: center;
  // background-color:rgba(0,0,0,0.5) !important;
  opacity: 0.7;

  height: 3rem;
  .left{
    cursor: pointer;
    width: 4rem;
    height: 2.5rem;
    background:url(../../../assets/images/home/headerlog.png) no-repeat;
    background-size: 100% 100%;
    
  }
  .el-menu{
    // background-color:#625e55 !important;
  }
  .el-menu-item{
    // color: #fff !important;
  }
  .login{
    cursor: pointer;
  
    span{
      font-size: 0.7rem;
        &:hover{
      color: #00baff;
    }
       &:nth-of-type(2){
      margin-left:0.25rem;
      margin-right:0.25rem;
    }
    }
  }

}
.el-menu-item {
  font-size:0.8rem !important;
}


</style>